<template>
  <div class="foodList">
      <div ref="container" >
        <van-sticky :container="container" offset-top="70">
            <van-row type="flex" justify="space-between" class="mode">
                    <span class="mode1">食材清单</span>
                    <span class="mode2 link" @click="addFoodList">加入采购清单</span>
            </van-row>
        </van-sticky>
        <van-row type="flex" justify="space-between" v-for="(item,index) in  recipe.major" :key="index" class="food">
                <span :class="{link:item.tu}" @click="getFoodList(item.title,item.tu)">{{item.title}}</span>
                <span>{{item.note}}</span>
        </van-row>
      </div>
        <van-nav-bar
            v-if="src_word"
            :title="src_word"
            left-arrow
            @click-left.stop="onClickLeft"
            :fixed="true"
            :placeholder ="true"
            z-index="101"
        >
            <template #title>
                <span>{{src_word}}的食材百科</span>
            </template>
        </van-nav-bar>
        <iframe v-if="src_word" name="myiframe" id="myrame" :src="getFoodListDetail(src_word)" frameborder="0" height="90vh" width="100vw"   align="left"   scrolling="auto" marginWidth=0 marginHeight=0 class="iframesty">
        <p class="tip">你的浏览器不支持iframe标签</p>
        </iframe>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
props:["recipe"],
data() {
    return {
      container: null,
      src_word: null,
    };
},

mounted() {
    this.container = this.$refs.container;
},
methods:{
    onClickLeft() {
      console.log("返回");
      this.src_word = null;
    },
    getFoodListDetail(word){
        return "https://m.douguo.com/ingredients/"+word+"/detailmaterial"
    },
    addFoodList(){
        console.log(11);
        this.lanziAdd({newM:this.recipe });
        this.toast();
    },
    ...mapMutations(["lanziAdd"]),
   
    toast: function(){
        this.$toast({
            message: '已加入菜篮',
            position: 'bottom',
            className: "love",
        });
    },
    getFoodList(title,tu){
        if(tu){
            console.log(title);
            this.src_word = title;
        }
    }
}
}
</script>

<style lang="less">
.link{
    color: #50969f;
}
.detail  .foodList{
     .van-nav-bar .van-nav-bar__content{
          background-color: white;
          height: 60px;
      }
     .van-nav-bar .van-nav-bar__content  .van-icon{
          color: #000;
      }
     .van-nav-bar__title{
         margin-left: 35px;
     }
    .iframesty{
        position: fixed;
        top: 60px;
        left: 0;
        height: 100vh;
        width: 100vw;
        z-index: 100;
        background-color: white;
    }
    .food{
        padding: 0 15px;
    }
    .mode{
        background-color: white;
        .mode1{
            font-weight: 600;
            margin-left: 15px;
        }
        .mode2{
            font-size: 13px;
            margin-right: 15px;
        }
    }
    .van-row{
        span{
            // background: pink;
            height: 40px;
            line-height: 40px;
        }
    }
}
</style>